<template>
    <div>
        <el-table :data="tableData" border style="width: 100%">
             <el-table-column prop="id" label="id" width="180" />
            <el-table-column prop="date" label="Date" width="180" />
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="address" label="Address" />
            <el-table-column  label="操作">
                 <template  v-slot="scope">
                    <el-button type="danger" @click="deleteChange(scope.row.id)">删除</el-button>
                </template>
             
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import { reactive } from '@vue/reactivity'
export default {
    setup() {
        const tableData =reactive( [
            {
                id:1,
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                 id:2,
                date: '2016-05-02',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                 id:3,
                date: '2016-05-04',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                id:4,
                date: '2016-05-01',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            ])
            const deleteChange = (id)=>{
                console.log(id);
                
                tableData.splice(id-1,1)
            }
            return{
                tableData,deleteChange
            }
    }
}
</script>